<ti-modal-header [id]="appendId('title')">{{title}}</ti-modal-header>
<ti-modal-body class="ti3-intro-body">
  <ng-container *ngIf="isStringContent else templateContent">
    <span>{{content}}</span>
  </ng-container>
  <div *ngIf="image" [class]="image"></div>
  <div class="ti3-intro-steplist-wrapper">
    <span class="ti3-intro-steplist-container" *ngIf="totalNumber > 1">
      <span
        *ngFor="let item of totalArray;let i = index;"
        class="ti3-intro-steplist-item"
        [ngClass]="{'active': i === currentNumber,
                            'ti-step-showed': currentNumber > i }"
        (click)="wantStep(i)"
        [id]="appendId(i)"
      ></span>
    </span>
  </div>
</ti-modal-body>
<ti-modal-footer>
  <div class="ti3-intro-button-container">
    <button type="button" tiButton *ngIf="skipable" [hasBorder]="false" (click)="dismiss()" [id]="appendId('skip')">
      {{ 'tiIntro.skip' | tiTranslate }}
    </button>
    <button type="button" tiButton color="danger" *ngIf="currentNumber < totalNumber" (click)="wantStep(1)" [id]="appendId('next')">
      {{ 'tiIntro.next' | tiTranslate }}
    </button>
    <button type="button" tiButton color="danger" *ngIf="currentNumber === totalNumber" (click)="close()" [id]="appendId('finish')">
      {{ finishButtonText ? finishButtonText : 'tiIntro.finish' | tiTranslate }}
    </button>
  </div>
</ti-modal-footer>
